<!--
 * @Author: Li Zengkun
 * @Date: 2022-06-18 23:50:55
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-01 21:23:45
 * @Description: 首页
-->
<!--  -->
<template>
  <div>
    <!-- 轮播图 -->
    <div class="block text-center invisible wow">
      <el-carousel height="640px">
        <el-carousel-item></el-carousel-item>
        <el-carousel-item></el-carousel-item>
      </el-carousel>
    </div>
    <!-- 内容 -->
    <div class="main-content">
      <!-- Part1 -->
      <div class="card-box" id="card-box">
        <ul>
          <li class="">
            <a href="#">
              <img src="../assets/index_cardimg1.jpg" alt="" />
              <div class="border"></div>
            </a>
            <a href="#" class="title"> <span>周边游深度旅行</span></a>
          </li>
          <li class="">
            <a href="#">
              <img src="../assets/index_cardimg2.jpg" alt="" />
              <div class="border"></div>
            </a>
            <a href="#" class="title"> <span>告别冬季 玩在澳洲</span></a>
          </li>
          <li class="">
            <a href="#">
              <img src="../assets/index_cardimg3.jpg" alt="" />
              <div class="border"></div>
            </a>
            <a href="#" class="title"> <span>出境旅游低价出行</span></a>
          </li>
        </ul>
      </div>

      <!-- Part2 产品 -->
      <div class="product-box">
        <div class="title">
          <h2>产品</h2>
          <p>精选全球最优质机票、酒店、邮轮等旅行产品</p>
        </div>
        <div class="product-button title_button">
          <a href="#product" class="active"><span>全部</span></a>
          <a href="#product" class=""><span>境外旅游</span></a>
          <a href="#product" class=""><span>境内旅游</span></a>
          <a href="#product" class=""><span>定制旅游</span></a>
          <a href="#product" class=""><span>特惠旅游</span></a>
        </div>
        <div class="product-cards">
          <ul ref="product_ul" id="product_ul">
            <li v-for="item in products" :key="item" class="invisible">
              <router-link
                :to="{ path: '/detail', query: { type: 'product', id: item.id } }"
                class="item_img"
              >
                <img v-bind:src="item.image" />
                <div class="plus"><i class="fa fa-plus" aria-hidden="true"></i></div>
              </router-link>
              <div class="item_wrapper">
                <div class="item_info">
                  <router-link
                    :to="{ path: '/detail', query: { type: 'product', id: item.id } }"
                    class="item_title"
                    >{{ item.title }}</router-link
                  >
                  <p class="subtitle">
                    {{ item.subtitle }}
                  </p>
                </div>
                <div class="item_tags">
                  <router-link
                    :to="{ path: '/detail', query: { type: 'product', id: item.id } }"
                    v-for="tag_item in item.tags"
                    :key="tag_item"
                    >{{ tag_item }}</router-link
                  >
                </div>
              </div>
              <router-link
                :to="{ path: '/detail', query: { type: 'product', id: item.id } }"
                class="more"
                ><i class="fa fa-long-arrow-right" aria-hidden="true"></i
              ></router-link>
            </li>
          </ul>
        </div>
        <a
          href="#product"
          class="list_more invisible"
          id="product_more"
          style="display: block"
        >
          点击获取更多...
        </a>
      </div>
    </div>

    <!-- Part3 关于我们 -->
    <div class="best_sellers" id="about_us_box">
      <div class="main-content">
        <div class="best_sellers_card invisible" id="about_us_card1">
          <a href="#aboutus"><img src="../assets/index_best_selers.jpg" alt="" /></a>
        </div>
        <div
          class="best_sellers_card about_us invisible"
          id="about_us_card2"
          style="animation-delay: 0.2s"
        >
          <h2>关于我们</h2>
          <h3>ABOUT US</h3>
          <p>
            德国XX股份公司创立于1847年，是全球电子电气工程领域的领先企业。自1950年进入中国，140余年来以创.
          </p>
          <a href="#aboutus">
            查看详情
            <div class="bg_color"></div>
          </a>
        </div>
      </div>
    </div>

    <!-- Part4 热卖 -->
    <div class="main-content main_title" id="best_seller_title">
      <h1>热销推荐</h1>
      <a href="#hotsell">全部</a>
    </div>
    <div class="best_seller_content" id="best_seller_content">
      <div class="main-content">
        <ul>
          <li class="invisible" id="rotate_card" style="animation-delay: 0s">
            <div class="front">
              <a href="#detail?type=hotsell&id=1"
                ><img src="../assets/index_bs_img1.jpg" alt=""
              /></a>
            </div>
            <div class="back">
              <div class="title">
                <h2>霍巴特市区休闲皮划艇半日游</h2>
                <p>趣味十足的皮划艇之旅，带你领略高颜值的霍巴特海港！！</p>
              </div>
              <a href="#detail?type=hotsell&id=1"> 查看详情 </a>
            </div>
          </li>
          <li class="invisible" id="best_sellers_card2" style="animation-delay: 0.2s">
            <div class="text_box">
              <a href="#detail?type=hotsell&id=2"
                >[昆士兰州热带风情小] 汤斯维尔磁岛两天一晚探索之旅(含岛上巴士通票)</a
              >
              <p>来昆士兰州热带风情小镇汤斯维尔体验2天1晚磁岛之旅,深度感受磁岛的魅力!</p>
            </div>
            <a href="#detail?type=hotsell&id=2" class="small">
              <img src="../assets/index_best_seller2.jpg" alt="" />
              <div class="plus"><i class="fa fa-plus" aria-hidden="true"></i></div>
            </a>
          </li>
          <li class="invisible" id="best_sellers_card3" style="animation-delay: 0.4s">
            <a href="#detail?type=hotsell&id=3" class="small">
              <img src="../assets/index_best_seller3.jpg" alt="" />
              <div class="plus"><i class="fa fa-plus" aria-hidden="true"></i></div>
            </a>
            <div class="text_box">
              <a href="#detail?type=hotsell&id=3"
                >悉尼夜间观光巴士之旅(环形码头+海港大桥+岩石区)</a
              >
              <p>双层观光巴士带您游览悉尼夜景，见识夜幕降临后悉尼光彩照人的另一面!</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Part5 团队精英 -->
    <div class="main-content main_title" id="member_title">
      <h1>团队精英</h1>
      <a href="#teammate">全部</a>
    </div>
    <div class="main-content member" id="member_content">
      <div class="left invisible" ref="main_member" id="member_left">
        <img style="width: 300px; height: 300px" :src="main_member.img" alt="" />
        <div class="about_us">
          <h2>{{ main_member.name }}</h2>
          <h3>{{ main_member.position }}</h3>
          <p>
            {{ main_member.info }}
          </p>
        </div>
      </div>
      <div class="right" id="member_right">
        <div class="list_box">
          <ul id="member_ul" ref="member_ul" style="margin-top: 0px">
            <li
              :style="{ animationDelay: index * 0.3 + 's' }"
              :class="index + 1 === 1 ? 'active' : 'noactive'"
              class="invisible"
              v-for="(item, index) of members"
              :key="index"
              @click="changeMember($event, index)"
            >
              <img :src="item.img" alt="" />
              <h2>{{ item.name }}</h2>
              <h3>{{ item.position }}</h3>
            </li>
          </ul>
        </div>
        <span class="up" @click="toUp()"
          ><i class="fa fa-angle-up" aria-hidden="true"></i
        ></span>
        <span class="down" @click="toDown()"
          ><i class="fa fa-angle-down" aria-hidden="true"></i
        ></span>
      </div>
    </div>

    <!-- Part6 满意度 -->
    <div class="user_count">
      <div class="main-content">
        <ul>
          <li>
            <h1>5,100</h1>
            <p>旅游人数</p>
          </li>
          <li>
            <h1>3,700</h1>
            <p>点评人数</p>
          </li>
          <li>
            <h1>93</h1>
            <p>满意度</p>
          </li>
          <li>
            <h1>24</h1>
            <p>提供24小时服务</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- Part7 特色酒店 -->
    <div class="title">
      <h2>特色酒店</h2>
      <p>精选全球最优质机票、酒店、邮轮等旅行产品</p>
    </div>
    <div class="product-button title_button">
      <a href="#hotel" class="active"><span>全部</span></a>
      <a href="#hotel" class=""><span>海外酒店</span></a>
      <a href="#hotel" class=""><span>国内酒店</span></a>
    </div>
    <div class="hotel_box" id="hotel">
      <div class="main-content">
        <ul class="flex_ul" id="hotel_ul">
          <li
            class="box_shadow invisible"
            :style="{ animationDelay: index * 0.2 + 's' }"
            v-for="(item, index) in hotels"
            :key="index"
          >
            <div class="img_box">
              <img :src="item.img" alt="" />
            </div>
            <div class="item_wrapper">
              <div class="item_info">
                <a
                  class="item_title"
                  target="_blank"
                  :href="'#detail?type=hotel&id=' + item.id"
                  >{{ item.title }}</a
                >
                <p class="subtitle">
                  {{ item.subtitle }}
                </p>
              </div>
              <a href="#hotel" class="more2">
                <span> MORE </span>
                <i></i>
              </a>
            </div>
          </li>
        </ul>
      </div>
      <a href="#hotel">
        <div
          class="more3 box_shadow invisible"
          id="hotel_more"
          style="animation-delay: 1s"
        >
          <i class="icon_more3"></i>
        </div>
      </a>
    </div>

    <!-- Part8 新闻 -->
    <div class="title" ref="news_title">
      <h2>新闻</h2>
      <p>NEWS</p>
    </div>
    <div class="product-button title_button">
      <a href="#news" class="active"><span>全部</span></a>
      <a href="#news" class=""><span>行业新闻</span></a>
      <a href="#news" class=""><span>公司新闻</span></a>
      <a href="#news" class=""><span>媒体关注</span></a>
    </div>

    <div class="main-content" id="news_box">
      <div
        class="card invisible"
        :style="{ animationDelay: index * 0.2 + 's' }"
        v-for="(item, index) of news"
        :key="item"
      >
        <h2>{{ item.title }}</h2>
        <div class="line"></div>
        <p>{{ item.content }}</p>
        <span>{{ item.date }}</span>
        <a
          :href="'#detail?type=news&id=' + item.id"
          target="_blank"
          class="more2"
          style=""
        >
          <span> MORE </span>
          <i></i>
        </a>
      </div>
    </div>
    <a href="#news">
      <div class="more3 box_shadow invisible" style="animation-delay: 1s" id="news_more">
        <i class="icon_more3"></i>
      </div>
    </a>

    <!-- Part9 合作伙伴 -->
    <div class="title" ref="partner_title">
      <h2>合作伙伴</h2>
      <p>cooperative partner</p>
    </div>
    <div class="product-button title_button">
      <a class="active"><span>全部</span></a>
    </div>
    <div class="partner_img_box">
      <ul class="main-content" ref="partner_ul">
        <li
          v-for="(item, index) in partners"
          :key="index"
          :style="{
            animationDelay: partner_delays[index] + 's',
            animationDuration: partner_duration + 's',
          }"
        >
          <a :href="item.url" :name="item.name" target="_blank">
            <img :src="item.img" :alt="item.name" />
          </a>
        </li>
      </ul>
    </div>

    <!-- Part10 联系我们 -->
    <div class="title" ref="partner_title">
      <h2>联系我们</h2>
      <p>connect</p>
    </div>
    <div class="main-content invisible" id="connect_box">
      <div class="left">
        <h2>网站建设文化传播有限公司</h2>
        <p>地址：中国地区XX分区5A写字楼8-88室</p>
        <p>邮编：100000</p>
        <p>电话：40080000</p>
        <p>手机：13333333333</p>
        <p>传真：000-123123</p>
        <p>邮箱：112345321@qq.com</p>
        <span>
          <i class="fa fa-qq"></i>
        </span>
        <span>
          <i class="fa fa-wechat"></i>
        </span>
        <span>
          <i class="fa fa-weibo"></i>
        </span>
      </div>
      <div class="right">
        <form action="#">
          <input
            class="input_text"
            type="text"
            placeholder="姓名"
            name="name"
            autocomplete="off"
          />
          <input class="input_text" type="text" placeholder="邮箱" name="mail" />
          <input class="input_text" type="text" placeholder="电话" name="phone" />
          <textarea class="input_text" placeholder="内容" name="content"></textarea>
          <input
            class="input_text form_submit_btn"
            type="button"
            @click="formSubmit()"
            value="Submit form"
          />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/indexPage.css";

export default {
  data() {
    return {
      products: [],
      last_member: null,
      members: [
        {
          name: "雷军",
          position: "小米公司CEO",
          info:
            "雷军，男，汉族，1969年12月16日出生于湖北省仙桃市，无党派，大学学历，理学学士学位，高级工程师。 [1]  中国大陆著名天使投资人。雷军作为中国互联网代表人物及全球年度电子商务创新领袖人物 [2]  ，曾获中国经济年度人物及十大财智领袖人物、中国互联网年度人物 [3]  等多项国内外荣誉，并当选《福布斯》（亚洲版）2014年度商业人物。同时兼任金山、YY、猎豹移动等三家上市公司董事长。雷军曾任两届海淀区政协委员，2012年当选北京市人大代表，2013年2月当选全国人民代表大会代表。2017年12月，荣获2017“质量之光”年度质量人物奖。",
          img: require("../assets/雷军.jpeg"),
        },
        {
          name: "马云",
          position: "alibaba负责人",
          info:
            "马云，男，汉族，中共党员，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇， 阿里巴巴集团主要创始人，现担任日本软银董事、大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事、联合国数字合作高级别小组联合主席。",
          img: require("../assets/马云.jpeg"),
        },
        {
          name: "库克",
          position: "苹果公司CEO",
          info:
            "蒂姆·库克，1960年11月1日出生于美国阿拉巴马州，现任苹果公司首席执行官，清华大学经济管理学院顾问委员会主席。1982年毕业于奥本大学工业工程专业。1988年获得杜克大学企业管理硕士学位。曾在IBM供职12年，负责PC部门在北美和拉美的制造和分销运作。1998年年初，库克进入苹果，任副总裁，主管苹果的电脑制造业务 [2]  。2011年接替乔布斯担任苹果公司CEO [3]  。2016年7月1日耐克公司任命蒂姆·库克为首席独立董事",
          img: require("../assets/库克.jpeg"),
        },
        {
          name: "罗永浩",
          position: "锤子科技",
          info:
            "罗永浩，男，1972年出生于吉林省延边朝鲜族自治州和龙县（今和龙市），现为交个朋友直播间首席好物推荐官 [1]  ，企业家，演说家 [2]  。曾先后创办过老罗英语培训学校、牛博网、锤子科技 [3-4]  ，并著有《我的奋斗》、《生命不息，折腾不止》 [5]  、《创业在路上》 [6]  等书。",
          img: require("../assets/老罗.jpeg"),
        },
        {
          name: "贾跃亭",
          position: "乐视公司",
          info:
            "贾跃亭，男，汉族，1973年12月15日 [57]  出生于山西省临汾市襄汾县，乐视控股集团创始人， [59]  乐视汽车生态全球董事长。2004年创建乐视网，于2010年8月在创业板上市，致力于打造基于视频产业、内容产业和智能终端的“平台+内容+终端+应用”完整生态系统，被业界称为“乐视模式”。2017年7月27日晚，乐视网（300104）收到控股股东贾跃亭通知，贾跃亭直接所持乐视网股份被全部冻结。",
          img: require("../assets/贾跃亭.jpeg"),
        },
      ],
      main_member: null,
      partners: [
        {
          name: "nike",
          url: "https://www.nike.com/cn",
          img:
            "https://resources.jsmo.xin/templates/upload/1625/201702/1487301445750.png",
        },
        {
          name: "nike",
          url: "https://www.nike.com/cn",
          img:
            "https://resources.jsmo.xin/templates/upload/1625/201702/1487301484106.png",
        },
        {
          name: "nike",
          url: "https://www.nike.com/cn",
          img:
            "https://resources.jsmo.xin/templates/upload/1625/201702/1487300188944.jpg",
        },
        {
          name: "nike",
          url: "https://www.nike.com/cn",
          img:
            "https://resources.jsmo.xin/templates/upload/1625/201702/1487300168408.jpg",
        },
        {
          name: "nike",
          url: "https://www.nike.com/cn",
          img:
            "https://resources.jsmo.xin/templates/upload/1625/201702/1487301361406.png",
        },
        { name: "nike", url: "https://www.mi.com/", img: require("../assets/小米.svg") },
        {
          name: "nike",
          url: "https://www.apple.com/cn",
          img: require("../assets/苹果.svg"),
        },
        {
          name: "nike",
          url: "https://www.huawei.com/cn",
          img: require("../assets/华为.svg"),
        },
        {
          name: "nike",
          url: "https://www.nike.com/cn",
          img: require("../assets/抖音.svg"),
        },
        {
          name: "nike",
          url: "https://www.nike.com/cn",
          img:
            "https://resources.jsmo.xin/templates/upload/1625/201702/1487301386730.png",
        },
      ],
      partner_delays: [],
      partner_duration: 10,
      hotels: [],
      news: [],
    };
  },
  components: {},
  beforeCreate() {},
  beforeMount() {
    this.main_member = this.members[0];
  },
  // 摧毁时撤销监听
  beforeUnmount() {
    window.onscroll = null;
  },
  mounted() {
    document.getElementsByTagName("title")[0].innerHTML = "云旅";
    // 数据初始化
    this.$axios.get("/data.json").then((res) => {
      this.products = res.data.products.slice(0, 8);
      this.hotels = res.data.hotels.slice(0, 4);
      this.news = res.data.news.slice(0, 4);
    });

    // 引入桌面端css

    this.last_member = document.getElementById("member_ul").children[0];

    // 合作伙伴 list 滚动事件计算
    let partnerLength = this.partners.length;
    for (let i = 0; i < partnerLength; i++) {
      this.partner_delays.push(i * (this.partner_duration / partnerLength).toFixed(2));
    }

    // 滑动渐入特效
    window.onscroll = function () {
      let topScroll = document.documentElement.scrollTop + window.innerHeight;

      // part1
      let cardBox = document.getElementById("card-box");
      let cardBoxHeight = cardBox.offsetTop;
      if (topScroll >= cardBoxHeight) {
        let items = cardBox.getElementsByTagName("ul")[0].childNodes;
        items.forEach((element) => {
          element.classList.add("wow");
        });
      }

      // part2
      let product_ul = document.getElementById("product_ul");
      let product_ul_height = product_ul.offsetTop;
      if (topScroll >= product_ul_height) {
        let items = product_ul.childNodes;
        items.forEach((element) => {
          if (element.classList != null) {
            element.classList.add("wow");
          }
        });
      }
      let product_more = document.getElementById("product_more");
      let product_more_height = product_more.offsetTop;
      if (topScroll >= product_more_height) {
        product_more.classList.add("wow");
      }

      // Part3
      let about_us_box = document.getElementById("about_us_box");
      if (topScroll >= about_us_box.offsetTop) {
        document.getElementById("about_us_card1").classList.add("wow");
        document.getElementById("about_us_card2").classList.add("wow");
      }

      // Part4
      let best_seller_content = document.getElementById("best_seller_content");
      if (topScroll >= best_seller_content.offsetTop) {
        document.getElementById("rotate_card").classList.add("wow");
        document.getElementById("best_sellers_card2").classList.add("wow");
        document.getElementById("best_sellers_card3").classList.add("wow");
      }

      // Part5
      let member_content = document.getElementById("member_content");
      if (topScroll >= member_content.offsetTop) {
        document.getElementById("member_left").classList.add("wow");
        document.getElementById("member_ul").childNodes.forEach((item) => {
          if (item.classList != null) {
            item.classList.add("wow");
          }
        });
      }

      // Part7
      let hotel = document.getElementById("hotel");
      if (topScroll >= hotel.offsetTop) {
        document.getElementById("hotel_more").classList.add("wow");
        document.getElementById("hotel_ul").childNodes.forEach((item) => {
          if (item.classList != null) {
            item.classList.add("wow");
          }
        });
      }

      // Part8 新闻
      let news_box = document.getElementById("news_box");
      if (topScroll >= news_box.offsetTop) {
        document.getElementById("news_more").classList.add("wow");
        news_box.childNodes.forEach((item) => {
          if (item.classList != null) {
            item.classList.add("wow");
          }
        });
      }

      // Part10 联系我们
      let connect_box = document.getElementById("connect_box");
      if (topScroll >= connect_box.offsetTop) {
        connect_box.classList.add("wow");
      }
    };
  },

  methods: {
    // 引入桌面端css
    importWebCss() {
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.src = "https://z1-pcok6.kuaishangkf.com/bs/ks.j?cI=736107&fI=138249&ism=1";
      document.body.appendChild(s);
    },

    // 更换成员精英
    changeMember(ev, index) {
      this.$refs.main_member.classList.add("twinkle");
      if (this.last_member !== null) {
        this.last_member.classList.remove("active");
        this.last_member.classList.add("noactive");
      }
      this.last_member = ev.currentTarget;
      ev.currentTarget.classList.remove("noactive");
      ev.currentTarget.classList.add("active");
      setTimeout(() => {
        this.main_member = this.members[index];
      }, 250);
      setTimeout(() => {
        this.$refs.main_member.classList.remove("twinkle");
      }, 500);
    },

    // 向上拉动
    toUp() {
      let member_ul = this.$refs.member_ul;
      let top = parseInt(member_ul.style.marginTop);
      if (top >= 0) return;
      member_ul.style.marginTop = top + 100 + "px";
    },
    // 向下拉动
    toDown() {
      const max = 100 * (this.members.length - 3);
      let member_ul = this.$refs.member_ul;
      let top = parseInt(member_ul.style.marginTop);
      if (Math.abs(top) >= max) {
        return;
      }
      member_ul.style.marginTop = top - 100 + "px";
    },
  },
};
</script>

<style scoped>
/* @import '../assets/css/indexPage.css'; */
</style>
